<template>
  <div id="price" v-for="(item, index) in PriceData" :key="index">
    <li>
      <img :src="item.img" alt="" />
      <div class="price_bot">
        <div>{{ item.tip }}</div>
        <p>
          <em>{{ item.title }}</em
          ><span></span><strong>{{ item.personal }}</strong>
        </p>
        <p>
          <em>{{ item.price }}</em
          ><strong>{{ item.assistance }}</strong
          >壹贝
        </p>
      </div>
    </li>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
import { computed, onMounted } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    // 2特价优惠
    const store = useStore();
    onMounted(async () => {
      fn();
      // 横向滚动条
      await new BetterScroll(".box", {
        scrollX: true,
        scrollY: false,
        click: true,
      });
    });

    const fn = () => store.dispatch("getClass2Async");
    const PriceData = computed(() => {
      return store.state.class.res2;
    });
    // console.log(PriceData.value);
    return { PriceData };
  },
};
</script>

<style lang="less" scoped>
#price {
  width: 161px;
  margin-right: 9px;

  li {
    width: 166px;
    text-align: left;
    background-color: #fbfbfb;
    padding-bottom: 20px;
    margin-left: 13px;
    box-sizing: content-box;
    img {
      width: 100%;
      height: 100px;
      margin: 0;
    }
    .price_bot {
      padding-top: 13px;
      padding-bottom: 20px;
      margin: 0 15px;
      box-sizing: content-box;
      background-color: #fbfbfb;

      div {
        width: 137px;
        overflow: hidden;
        margin: auto;
        font-size: 15px;
        height: 40px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #242424;
        line-height: 20px;
      }

      & > p:nth-of-type(1) {
        width: 100%;
        height: 20px;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #676767;
        line-height: 15px;
        display: flex;
        align-items: center;
        justify-content: left;
        margin-top: 8px;
        em {
          margin-right: 2px;
        }
        span {
          display: block;
          width: 3px;
          height: 3px;
          background-color: #363636;
          border-radius: 50%;
          margin: 0 4px 0 4px;
        }
        strong {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      & > p:nth-of-type(2) {
        text-align: right;
        font-size: 9px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ea5844;
        line-height: 20px;
        padding-bottom: 20px;
        box-sizing: content-box;
        em {
          font-size: 10px;
          font-weight: bold;
          text-decoration: line-through;
          color: #bcbcbc;
        }
        strong {
          font-size: 15px;
          font-weight: bold;
          color: #ea5844;
        }
      }
    }
  }
}
</style>
